<template>
    <div>
        <el-card shadow="never">
           <div class="title">商品信息</div>
           <div class="clearfix">
               <div style="float:left;width:400px;">
                    <p class="sm-title">商品主图：</p>
                    <img :src="list.mainPic" alt="" style="width:256px;">
                    <!-- <img src="./images/cash.png" alt=""> -->
               </div>
               <div style="float:left">
                    <p class="sm-title">轮播图片：(选填)</p>
                    <div>



                        <img :src="item"  alt="" v-for="item in imgArr" :key="item.index" style="width:200px;">
                       
                        <!-- <img src="./images/cash.png" alt="">
                        <img src="./images/cash.png" alt=""> -->
                    </div>
               </div>
           </div>
           <div>
               <ul class="seenlist">
                   <li><span class="color">商品名称：</span><span >{{list.name}}</span></li>
                   <li><span  class="color">商品价格：</span><span >{{list.price}}</span></li>
                   <li><span  class="color">计量单位：</span><span >{{list.unit}}</span></li>
                   <li><span  class="color">总库存量：</span><span >{{list.inventory}}</span></li>
               </ul>
               <div class="heightln color">
                   商品规格:
                </div>
               <ul>
                   <li v-for="item in list.specInfoJson" :key="item.index">{{item.name}}：{{item.content}}</li>
               </ul>
           </div>
        </el-card>
        <el-card shadow="never" style="margin-top:20px;">
                <div class="title">生成信息</div>
                <div class="heightln">
                    <div class="color"> 商品规格:</div>
                    <ul>
                         <li  v-for="item in list.createInfoJson" :key="item.index">{{item.name}}： {{item.content}}</li>
                    </ul>
                 </div>
                
                    <div class="heightln" v-if="free">
                        <div class="color"> 溯源信息:</div>
                        <ul>
                            <li  v-for="item in list.sourceInfoJson" :key="item.index">{{item.name}}： {{item.content}}</li>
                        </ul>
                    </div>
               
                <div class="color" style="margin-bottom: 20px;">内容:</div>
                <div v-html="list.describe">这是内容</div>
                
                <div style="margin-top:20px;"><span class="color">商品状态：</span><span>{{state(list.state)}}</span></div>
        </el-card>
        <div id="myChart" :style="{width: '300px', height: '300px'}"></div>
    </div>
</template>
<script>

    export default{
        data(){
            return{
                goodsNo:this.$route.query.goodsNo,
                list:{},
                imgArr:[],
                free:this.$route.query.free
            }
        },
        methods: {
            async initData(){
                let {data} = await this.$post({
                    api:'/api/goods/getGoodsByNo',
                    data:{
                        goodsNo:this.goodsNo
                    }
                })
                if(data.code === 0){
                    this.list = data.data;
                    this.imgArr = data.data.listPic.split(',');
                    console.log('data',)
                }
            },
            state(n){
                let params = ''
                switch (n){
                    case 0:
                    params = '上架审核';
                    break;
                    case 1:
                    params = '上架';
                    break;
                    case 2:
                    params = '下架';
                    break;
                    case 3:
                    params = '上架驳回';
                    break;
                    case 4:
                    params = '下架审核';
                    break;
                    case 5:
                    params = '下架驳回';
                    break;
                    case 6:
                    params = '待入库';
                    break;
                    case 7:
                    params = '已入库';
                    break;
                    case 8:
                    params = '待上架';
                    break;
                    default:
                }
                return params
            }, 
           
        },
        mounted () {
            this.initData();
           
            console.log(this.$route.query.free)
        }
    }
</script>
<style scoped lang="sass">
.title{
    color:#409EFF;  
    margin-bottom: 20px;
    font-size:20px;
    font-weight: bold;
}
.sm-title{
    margin-bottom: 20px;
}
.seenlist{

}
li{
    margin:20px 0 ;
}
.heightln{
    
    /* float:left; */
    margin-right:30px;
    
    /* color:#409EFF; */
}
.color{
    color:#409EFF;
}
</style>